/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react'
import { Button, Form, Input, Toast } from 'antd-mobile'
import { CountDown } from '../../hook'
import { CodeApi, CodeLoginApi } from '../../api/user'
function login() {
    const [form]=Form.useForm()
    const {start,count,isDown}=CountDown(5)
    const Send=async()=>{
        try{
             form.validateFields(['tel'])
            const result=await CodeApi()
            console.log(result);
            const {data:res}=CodeLoginApi()
            console.log('res',res);
            form.setFieldValue('telCode',result.telCode)
            start()
        }catch{
            Toast.show('手机号格式不正确')
        }
    }
  return (
    <div>
        <h1>Hi,欢迎使用</h1>
        <h5>未注册过的手机号将自动创建账号</h5>
      <Form layout='horizontal' mode='card'
      form={form}
      footer={
          <Button block type='submit' color='warning' size='large' shape='rounded'>
            登录
          </Button>
        }
      >
        <Form.Item label='+86' name="tel"
        rules={[{ required: true, message: '手机号不能为空' },
            {pattern:/^1[3-9]\d{9}$/,message:'手机号为11位'}
        ]}
        >
          <Input placeholder='请输入' />
        </Form.Item>
        <Form.Item
        rules={[{ required: true, message: '验证码不能为空' }]}
        label='' name="telCode" onClick={Send} extra={<Button disabled={isDown} shape='rounded' style={{background:'yellow'}}>{isDown?count+'后可重发':'发送验证码'}</Button>}>
          <Input placeholder='请输入' />
        </Form.Item>
        </Form>
    </div>
  )
}

export default login
